import React from "react";
import styles from './HomePage.module.css';
import { Header, Footer,SideMenu,Carousel,ProductCollection,JointVenture } from "../../components";
import { Row, Col, Typography, Spin } from 'antd'
import sideImage1 from '../../assets/images/sider_2019_12-09.png'
import sideImage2 from '../../assets/images/sider_2019_02-04.png'
import sideImage3 from '../../assets/images/sider_2019_02-04-2.png' 
import { connect } from "react-redux";
import { RootState } from "../../redux/store";
import { giveMeDataActionCreator } from "../../redux/recommendProducts/recommendProductsActions";
import { withTranslation, WithTranslation } from "react-i18next";
import { MainLayout } from "../../layouts/mainLayout";
import { getRecommendProducts, recommendProductsSlice } from "../../redux/recommendProducts/slice";


const mapStateToProps = (state: RootState) => {
  return {
    loading: state.recommendProducts.loading,
    error: state.recommendProducts.error,
    productList: state.recommendProducts.productList
  }
}
const mapDispatchToProps = (dispath) => {
  return {
    giveMeData: () => {
      
      dispath(getRecommendProducts())
   }
  }
}

type PropsType = WithTranslation & ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps>

class HomePageComponent extends React.Component<PropsType>{

  componentDidMount() {
    
    this.props.giveMeData()
  }

  render(): React.ReactNode {
    const { t,productList, loading, error } = this.props
    
    if (loading) { 
      return <Spin
        size="large"
        style={{
          marginTop: 20,
          marginBottom: 200,
          marginLeft: 'auto',
          marginRight: 'auto',
          width: '100%',
        }}
      
      />
    }
    if (error) {
      return <div>网站出错：{error }</div>
    }

    return <>
    <MainLayout>

        <Row style={{ marginTop: 20 }}>
          <Col span={6}>
            <SideMenu/>
          </Col>
          <Col span={18}>
            <Carousel/>
          </Col>
        </Row>

        <ProductCollection
          title={<Typography.Title level={3} type="warning" >{t('home_page.hot_recommended')}</Typography.Title>}
          sideImage={sideImage1}
          products = {productList[0].touristRoutes}
        />
         <ProductCollection
          title={<Typography.Title level={3} type="danger" >{t('home_page.new_arrival')}</Typography.Title>}
          sideImage={sideImage2}
          products =  {productList[1].touristRoutes}
        />
         <ProductCollection
          title={<Typography.Title level={3} type="success" >{t('home_page.domestic_travel')}</Typography.Title>}
          sideImage={sideImage3}
          products =  {productList[2].touristRoutes}
        />

        <JointVenture
        />
 
        </MainLayout>
    </>
  }
}
export const HomePage = connect(mapStateToProps,mapDispatchToProps)(withTranslation()(HomePageComponent))